<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<!-- meta使用viewport以确保页面可自由缩放 -->

		<!-- 引入 jQuery Mobile 样式 -->
		<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">-->
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
		<link rel="stylesheet" href="css/view.css">
		<style type="text/css">


		</style>
		<script src="//at.alicdn.com/t/font_735135_auppsuv4uv.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript">
			//通过config接口注入权限验证配置
			wx.config({
				debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: '', // 必填，公众号的唯一标识
				timestamp: '', // 必填，生成签名的时间戳
				nonceStr: '', // 必填，生成签名的随机串
				signature: '', // 必填，签名
				jsApiList: [] // 必填，需要使用的JS接口列表
			});
			//通过ready接口处理成功验证
			wx.ready(function() {
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
			});
		</script>
	</head>

	<body ontouchstart>

		<div id="element" class="header">
			<div id="view" class="view" style="width: 100%;height: 160px;background-color: #2298D6;display: none;">
			</div>

			<div id="title" class="weui-flex header-box">
				<div class="title-icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-gift_icon"></use>
					</svg>
				</div>
				<div style="flex: 1;"></div> <!--占位置用的-->
				<div id="title-box" class="title-box off">
					<!-- ▲▼ -->
					<label id="btn-title"><label id="title-name">默认账单▼</label></label>
				</div>
				<div style="flex: 1;"></div> <!--占位置用的-->
				<div class="title-icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-gift_icon"></use>
					</svg>
				</div>
			</div>

		</div>
		
		<div style="width: 100%;height: 45px;"></div> <!--占位置用的-->
		<div class="view" style="width: 100%;height: 160px;display: none;"></div> <!--占位置用的-->
		
		<div id="box" class="content-box ">
				<div id="position-view"></div> <!--检测位置用-->
				<div class="weui-flex item-line" style="height: 30px;">
					<div style="flex: 1;"></div> <!--占位置用的-->
					<div style="width: 1px;background-color: #2298D6;"></div> <!--线-->
					<div style="flex: 1;"></div> <!--占位置用的-->
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-line">
					<div style="flex: 1;"></div>
					<div style="width: 1px;background-color: #2298D6;"></div>
					<div style="flex: 1;"></div>
				</div>
				<div class="weui-flex item-box">
					<div style="flex: 1;"></div>
					<div class="icon-box">
						<svg class="icon" aria-hidden="true" >
							<use xlink:href="#icon-biandangicon"></use>
						</svg>
					</div>
					<div style="flex: 1;"></div>
				</div>
				<!--占位置用的-->
				<!--<div style="height: 120px;"></div>-->
			</div>
		<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
		<!-- 引入 jQuery Mobile 库 -->
		<!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
		<script src="js/jquery.swipe.js"></script>
		<script>
			//需要用的变量
			var startX;
			var endX;
			
			var titleType = 0; //0默认 1搜索
			var touchType = 0; //状态
			
			var changeOver = 0;
			
			var isOver = 0;
			//修改高度
			window.onresize = function(){
				if($('#view').css('display') == 'none') {
					$('.content-box').css('height',(document.documentElement.clientHeight - 50))
				}else{
					$('.content-box').css('height',(document.documentElement.clientHeight - 210))
				}
			}
			
			$('#btn-title').click(function() {
				$(".view").slideToggle(300, function() {
					if($('#view').css('display') == 'none') {
						$('#title-name').html('默认账单▼');
						$('.content-box').css('height',(document.documentElement.clientHeight - 50))
					} else {
						$('#title-name').html('默认账单▲');
						$('.content-box').css('height',(document.documentElement.clientHeight - 210))
					}
				});
			});
			
			$('#box').on("scrollstart", function(e) {
				// 判断默认行为是否可以被禁用
				if(e.cancelable) {
					// 判断默认行为是否已经被禁用
					if(!e.defaultPrevented) {
						e.preventDefault();
					}
				}
				touchType = 1;
				startX = document.getElementById('position-view').getBoundingClientRect().top;
			});
			
			var startY = 0;
			var moveY = 0;
			var moveEndY = 0;
			var Y;
			$('#box').on("touchstart", function(e) {
				e.stopPropagation();
//				startY = e.originalEvent.changedTouches[0].screenY;
				startY = document.getElementById('position-view').getBoundingClientRect().top;
//				console.log(startY,"touchstart");
				isOver = 0;
			});
			var aaaa = 0;
			$('#box').on("touchmove", function(e) {
				if(touchType == 0) return;
//				moveY = e.originalEvent.changedTouches[0].screenY;
				moveY = document.getElementById('position-view').getBoundingClientRect().top;
        		Y = moveY - startY;
//      		console.log(moveY,"touchmove");
//      		console.log(Y,'Y')
        		if(Y > 100) Y = 100;
        		if(Y < -100) Y = -100;
        		Y = Y/2;
        		Y = -Y + 50;
        		aaaa = Y;
        		showTitle(Y);console.log(Y,"222");
			});
			
			$('#box').on("touchend", function(e) {
				e.stopPropagation();
//      		moveEndY = e.originalEvent.changedTouches[0].screenY;
//      		Y = moveEndY - startY;
        		if(Y > 100) Y = 100;
        		if(Y < -100) Y = -100;
        		Y = Y/2;
        		Y = -Y + 50;
//      		console.log(moveEndY,"touchend");
        		if(changeOver == 0) overChange(aaaa)
        		console.log(aaaa,"touchend");
        		isOver = 1;
			});

			$('#box').on("scrollstop", function(e) {
				// 判断默认行为是否可以被禁用
				if(e.cancelable) {
					// 判断默认行为是否已经被禁用
					if(!e.defaultPrevented) {
						e.preventDefault();
					}
				}
				touchType = 0;
				endX = document.getElementById('position-view').getBoundingClientRect().top;
				if(endX == startX) {
					titleType = 0;
				} else {
					if(startX > endX){
						titleType = 1;
					}else{
						titleType = 0;
					}
				}
//				if(changeOver == 0) changTitle()
			});
			
			
			function showTitle(num){ //num 0~100
				if(titleType == 0 && num < 50) return;
				if(titleType == 1 && num >= 50) return;

				var p = ((90/100).toFixed(2))*num;
				var v = 1 - (num/100).toFixed(2);
				if(num == 0){
					$('.title-icon-box').show();
					$('.title-icon-box').css({ opacity: 1 })
					$('#btn-title').css('padding', '3px 8px 3px 8px;');
					$('#title-name').html("默认账单▲");
					$('#title-name').css({ opacity: 1 });
					changeOver = 1;
					titleType = 0;
				}else if(num == 100){
					$('.title-icon-box').css({ opacity: 0 })
					$('#btn-title').css({"padding":"3px 98px"})
					$('#title-name').html("请输入关键字");
					$('#title-name').css({ opacity: 1 });
					changeOver = 1;
					titleType = 1;
				}else{
					changeOver = 0;
					$('.title-icon-box').css({ opacity: v })
					if( p < 18) p = 18;
					$('#btn-title').css({"padding":"3px "+p+"px"})
					if(num >= 50){
						var t = ((num-50)/50).toFixed(2);
						$('#title-name').html("请输入关键字");
						$('#title-name').css({ opacity: t });
						if(isOver == 1){
							changTitleByType(1,false)
						}
					}else{
						var t = 1 - ((num)/50).toFixed(2);
						$('#title-name').html("默认账单▲");
						$('#title-name').css({ opacity: t });
						if(isOver == 1){
							changTitleByType(0,false)
						}
					}
					
				}
			}
			
			function overChange(num){
				if(titleType == 0 && num < 50) return;
				if(titleType == 1 && num >= 50) return;
				
				if(num >= 50){
					changTitleByType(1,false);
//					for (var i = num; i <= 100; i++) {
////						setTimeout(function(){
//							changTitle(i)
////						},10);
//					}
				}else{
					changTitleByType(0,false);
//					for (var i = num; i >= 0; i--) {
////						setTimeout(function(){
//							changTitle(i)
////						},10);
//					}
				}
			}
			
			//旧的
			function changTitle(){
				if($('#view').css('display') != 'none') return;
				if(titleType == 0){//title
					$('#btn-title').css('padding', '3px 18px 3px 8px;');
					
					var options = {
						queue:false
					}
					$('.title-icon-box').fadeIn(options);
					$('#title-name').fadeOut(400,function(){
						$('#title-name').html("默认账单▲");
						$('#title-name').fadeIn(400);
					});

				}else{//query
					var options = {
						queue:false
					}
					$('.title-icon-box').fadeOut(options);
					$('#btn-title').css('padding', '3px 98px');
					$('#title-name').fadeOut(400,function(){
						$('#title-name').html("请输入关键字");
						$('#title-name').fadeIn(400);
					});
				}
			}
			
			function changTitleByType(type,flag){
				if(type == 0){//title
					$('#btn-title').css('padding', '3px 18px 3px 8px;');
					var options = {
						queue:false
					}
					$('.title-icon-box').fadeIn(options);
					if(flag){
						$('#title-name').fadeOut(200,function(){
							$('#title-name').css({ opacity: 1 });
							$('#title-name').html("默认账单▲");
							$('#title-name').fadeIn(400);
						});
						
					}else{
						$('#title-name').css({ opacity: 1 });
						$('#title-name').html("默认账单▲");
						$('#title-name').fadeIn(300);
					}
					
				}else{//query
					var options = {
						queue:false
					}
					$('.title-icon-box').fadeOut(options);
					
					$('#btn-title').css('padding', '3px 98px');
					if(flag){
						$('#title-name').fadeOut(200,function(){
							$('#title-name').css({ opacity: 1 });
							$('#title-name').html("请输入关键字");
							$('#title-name').fadeIn(400);
						});
					}else{
						$('#title-name').css({ opacity: 1 });
						$('#title-name').html("请输入关键字");
						$('#title-name').fadeIn(300);
					}
				}
			}

		</script>
	</body>

</html>